<template>
    <div>
        <el-row>
            <el-col class="trowcss1" :span="2" style="">
                <div style="width: 100%;">
                    <span class="tspancss">测试统计</span>
                </div>
            </el-col>
            <el-col class="trowcss2" :span="22" style="">
                <div class="tdiv1">
                    <div class="tdiv2">
                        <el-cascader-panel :clearable="true" @change="refind($event)" @expand-change="refind2($event)" :options="typeList"></el-cascader-panel>
                    </div>
                    <div class="tdiv3">
                        <div id="Test1" class="tediv"></div>
                        <div id="Test2" class="tediv"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getProjectBrand } from "@/api/business/project"
import { getHandleBugCount } from "@/api/business/bugs"
export default {
    name: 'TestStatistics',
    data() {
        return {
            typeList: [
                {}
            ],
            sourceDate1: [],
            sourceDate2: [],
            queryParam: {
                custom: null,
                model: null
            }
        };
    },
    mounted() {
        this.getBugCountDate()
    },
    computed: {
    },
    watch: {
    },
    created() {
        this.getBrandAndModel()
    },
    methods: {
        // 销毁Echarts
        destoryChar() {
            if (echarts.getInstanceByDom(document.getElementById('Test1'))) {
                echarts.dispose(document.getElementById('Test1'))
            }
            if (echarts.getInstanceByDom(document.getElementById('Test2'))) {
                echarts.dispose(document.getElementById('Test2'))
            }
        },
        // 初始化Echarts
        initEcharts(data1, data2) {
            var myChart = echarts.init(document.getElementById('Test1'));

            var myChart1 = echarts.init(document.getElementById('Test2'));

            const option2 = {
                dataset: {
                    source: data2
                    // [
                    // ['数量', 'title'],
                    // [89.3, 58212, 'Matcha Latte'],
                    // [57.1, 78254, 'Milk Tea'],
                    // [74.4, 41032, 'Cheese Cocoa'],
                    // [50.1, 12755, 'Cheese Brownie'],
                    // [58, '未解决'],
                    // [24, '未确认'],
                    // [34, '未关闭'],
                    // [10.6, 101, 'Lemon'],
                    // [32.7, 401, 'Walnut']
                    // ]
                },
                grid: { containLabel: true },
                xAxis: { name: '数量' },
                yAxis: { type: 'category' },
                // visualMap: {
                //   orient: 'horizontal',
                //   left: 'center',
                //   min: 10,
                //   max: 100,
                //   text: ['High Score', 'Low Score'],
                //   // Map the score column to color
                //   dimension: 0,
                //   inRange: {
                //     color: ['#65B581', '#FFCE34', '#FD665F']
                //   }
                // },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            x: '数量',
                            // Map the "product" column to Y axis
                            y: 'type'
                        },
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true
                        }
                    }
                ]
            };

            const option1 = {
                title: {
                    left: 'center',
                    bottom: '5px',
                    text: '指派给我的'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '标注',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        // avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data1
                        //  [
                        //     { value: 58, name: '未解决' },
                        //     { value: 24, name: '未确认' },
                        //     { value: 34, name: '未关闭' }
                        // ]
                    }
                ]
            };

            myChart.setOption(option1);
            myChart1.setOption(option2);

        },
        getBrandAndModel() {
            getProjectBrand().then(res => {
                this.typeList = res.data ? res.data : this.typeList
            })
        },
        async getBugCountDate() {
            await getHandleBugCount(this.queryParam).then(res => {
                const arr2 = res.data
                const arr1 = []
                let param = {}
                if (Array.from(arr2).length > 0) {
                    for (let res of arr2) {
                        param.value = res[0]
                        param.name = res[1]
                        arr1.push(param)
                        // console.log(param)
                        param = {}
                    }
                }
                this.initEcharts(arr1, arr2)
            })
        },
        refind(event) {
            this.queryParam.custom = event[0]
            this.queryParam.model = event[1]
            this.destoryChar()
            this.getBugCountDate()
        },
        refind2(event) {
            this.queryParam.custom = event[0]
            this.queryParam.model = null
            this.destoryChar()
            this.getBugCountDate()
        }
    },
};
</script>

<style>
.trowcss1 {
    height: 400px;
    border-right: 2px solid rgb(52, 176, 225);
}

.trowcss2 {
    height: 400px;
    height: 400px;
    border-top: 2px dashed rgb(52, 176, 225);
    border-right: 2px dashed rgb(52, 176, 225);
    border-bottom: 2px dashed rgb(52, 176, 225);
}

.tdiv1 {
    width: 100%;
    height: 400px;
}

.tdiv2 {
    width: 27%;
    height: 400px;
    float: left;
}

.tdiv3 {
    width: 73%;
    float: left;
    height: 400px;
}

.tspancss {
    writing-mode: vertical-rl;
    text-align: center;
    margin-top: 160px;
    color: rgb(26, 112, 146);
    font-weight: bolder;
    font-size: 20px;
    text-shadow: 0px 0px 6px rgb(26, 112, 146);
    letter-spacing: 0.5em;
    font-family: "微软雅黑";
}

.tediv {
    width: 50%;
    float: left;
    height: 400px;
}
</style>
